<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投递记录</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="css/mescroll.min.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: white
        }

        ul {
            list-style-type: none
        }

        img {
            width: 100%;
            vertical-align: bottom;
        }

        /*列表*/
        .mescroll {
            position: fixed;
            top: 0;
            bottom: 0;
            height: auto;
        }

        /*回到顶部按钮*/
        .mescroll-totop {
            bottom: 70px;
        }

        /*下拉刷新回调的提示*/
        .download-tip {
            z-index: 9900;
            position: fixed;
            top: 20px;
            left: 0;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            text-align: center;
            background-color: rgba(80, 175, 85, .7);
            color: white;
            -webkit-transition: top 300ms;
            transition: top 300ms;
        }

        /*展示上拉加载的数据列表*/
        .news-list li {
            padding: 16px;
            border-bottom: 1px solid #eee;
        }

        .news-list .new-content {
            font-size: 14px;
            margin-top: 6px;
            margin-left: 10px;
            color: #666;
        }


        .new-content {
            position: relative;

        }


        .top {
            background: #ddd;
            padding: 17px 27px 10px 24px;
            font-size: 14px;
            text-align: center;
            border-radius: 22px 0px 22px 1px;
        }

        .top-content {
            position: relative;

            display: flex;
            padding-bottom: 0.5rem;
        }

        .top-content .has-img {
            position: relative;
        }

        .top-content .has-img img {
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
        }

        .top-content .has-img .has-tag {
            position: absolute;
            background: rgb(105, 224, 240, 0.8);
            bottom: 0px;
            right: 0px;
            border-radius: 5px;
            padding: 0px 6px 0px 6px;
            font-size: 0.4rem;
        }

        .has-tit p {
            font-size: 0.95rem;
            font-weight: bold;
            padding: 7px 0px 1px 21px;

        }

        .other-content .s {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

        .my-icon-qizi:before {
            content: "\e60c";
            color: rgba(20, 154, 231, 0.986);
        }

        .my-icon-xiaochengxu_tubiao:before {
            content: "\e608";
            color: rgba(20, 154, 231, 0.986);
        }

        .my-icon-shijian:before {
            content: "\e684";
            color: rgba(20, 154, 231, 0.986);
        }

        .my-icon-wo:before {
            content: "\e664";
            color: rgba(20, 154, 231, 0.986);
        }

        .has-tit p {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .has-icon span{
            font-size: 0.5rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- <p id="downloadTip" class="download-tip"></p> -->
        <!--滑动区域-->
        <div id="mescroll" class="mescroll">
            <!--展示上拉加载的数据列表-->
            <ul id="newsList" class="news-list">

            </ul>
        </div>
    </div>

</body>
<script src="./js/mescroll.min.js"></script>
<script>
    $(function () {

        //创建MeScroll对象
        var mescroll = initMeScroll("mescroll", {
            down: {
                auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
                callback: downCallback, //下拉刷新的回调
            },
            up: {
                auto: true,//初始化完毕,是否自动触发上拉加载的回调
                isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                callback: upCallback, //上拉加载的回调
                toTop: false,
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 10 //每页数据条数,默认10
                },
            }
        });
        /*下拉刷新的回调 */
        function downCallback() {
            var isAppend = true;
            var curPageData = [{
                id: '1',
                image: 'url',
                name: '校外',
                company: '位来教育科技有限公司双选会',
                school: '吉林大学',
                site: '',
                time: '',
                num: '',
                visited: ''
            }, {
                id: '1',
                image: 'url',
                name: '校内',
                company: '位来教育科技有限公司双选会',
                school: '吉林大学',
                site: '',
                time: '',
                num: '',
                visited: ''
            },
            {
                id: '1',
                image: 'url',
                name: '校外',
                company: '位来教育科技有限公司双选会',
                school: '吉林大学',
                site: '',
                time: '',
                num: '',
                visited: ''
            }
            ]
            setListData(curPageData, isAppend);
            hascolor();
            mescroll.endSuccess(curPageData.length) // 关闭加载动画

            // $.ajax({
            //     url: 'xxxxxx',
            //     success: function (res) {
            //         var curPageData = res.xxx;
            //         var isAppend;
            //         if (current_page < last_page){
            //             isAppend=true;
            //         }else{
            //             isAppend=false;
            //         }
            //             //联网成功的回调,隐藏下拉刷新的状态;
            //             mescroll.endSuccess(); //无参. 注意结束下拉刷新是无参的
            //         //设置数据
            //         setListData(curPageData, isAppend);

            //     },
            //     error: function (res) {
            //         //联网失败的回调,隐藏下拉刷新的状态
            //         mescroll.endErr();
            //     }
            // });

        }
        /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        function upCallback(page) {
            //联网加载数据
            // $.ajax({
            //     url: url,
            //     data:data,
            //     success: function (res) {
            //         var curPageData = res.xxx; // 接口返回的当前页数据列表
            //         var totalPage = res.xxx; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
            //         var totalSize = res.xxx; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
            //         //         var isAppend;
            // if (current_page < last_page){
            //             isAppend=true;
            //         }else{
            //             isAppend=false;
            //         }
            //         setListData(curPageData, isAppend);
            //     }
            // });
            var isAppend = false;
            var curPageData = [{
                id: '1',
                image: './image/t1.png',
                name: '校外',
                company: '位来教育科技有限公司双选会啊飒飒大打算打大多数位来教育科技有限公司双选会啊飒飒大打算打大多数位来教育科技有限公司双选会啊飒飒大打算打大多数算打大多数位来教育科技有限公司双选会啊飒飒大打算打大多数位来教育科技有限公司双选会啊飒飒大打算打大多数',
                school: '吉林大学',
                site: 'wqerweq',
                time: '23423',
                num: '234',
                visited: '234234'
            }, {
                id: '1',
                image: 'url',
                name: '校外',
                company: '位来教育科技有限公司双选会',
                school: '吉林大学',
                site: '23423',
                time: '242',
                num: '234',
                visited: '34234234'
            },
            {
                id: '1',
                image: 'url',
                name: '校外',
                company: '位来教育科技有限公司双选会',
                school: '吉林大学',
                site: '23423',
                time: '24234',
                num: '234',
                visited: '23423'
            }, {
                id: '1',
                image: 'url',
                name: '校外',
                company: '位来教育科技有限公司双选会',
                school: '吉林大学',
                site: '23423',
                time: '242',
                num: '234',
                visited: '34234234'
            },
            {
                id: '1',
                image: 'url',
                name: '校外',
                company: '位来教育科技有限公司双选会',
                school: '吉林大学',
                site: '23423',
                time: '24234',
                num: '234',
                visited: '23423'
            }
            ]
            setListData(curPageData, isAppend);
            hascolor();
            mescroll.endSuccess(curPageData.length) // 关闭加载动画
        }
        /*设置列表数据*/
        function setListData(curPageData, isAppend) {
            var listDom = document.getElementById("newsList");
            if (isAppend) {
                listDom.innerHTML = ''; // 清空
            }
            for (var i = 0; i < curPageData.length; i++) {
                var n = curPageData[i];
                var str = '';
                str += `<div id="` + n.id + `"class="new-content">
                        <div class="top-content">
                            <div class="has-img">
                                <img src="`+ n.image + `">
                                <div class="has-tag tag">`+ n.name + `</div>
                            </div>
                            <div class="has-tit">
                                <p>`+ n.company + `</p>
                            </div>

                        </div>
                        <div class="other-content">
                            <div class="has-icon">
                                <i class="iconfont my-icon-qizi"></i>
                                <span>主办方:`+ n.school + `</span></div>
                            <div class="has-icon">
                                <i class="iconfont my-icon-xiaochengxu_tubiao"></i>
                                <span>地点:`+ n.site + `</span></div>
                            <div class="has-icon">
                                <i class="iconfont my-icon-shijian"></i>
                                <span>时间:`+ n.time + `</span></div>
                            <div class="has-icon">
                                <i class="iconfont my-icon-wo"></i>
                                <span>参与企业`+ n.num + `家</span></div>
                            <div class="has-icon s">
                                <i class="iconfont my-icon-liulan"></i>
                                <span>`+ n.visited + `</span></div>
                        </div>
                    </div>`;
                var liDom = document.createElement("li");
                liDom.innerHTML = str;
                listDom.appendChild(liDom);//加在列表的后面,上拉加载
            }
        }



    });
    function initMeScroll(mescrollId, options) {
        //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除)
        var myOption = {
            down: {
                offset: 60, //触发刷新的距离
                htmlContent: '<p class="downwarp-progress"><p>', //布局内容

            },
            up: {
                htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p>', //上拉加载中的布局

            }
        }
        //加入自定义的默认配置
        options = MeScroll.extend(options, myOption);
        //创建MeScroll对象
        return new MeScroll(mescrollId, options);
    }
    $('#newsList').on('click', '.new-content', function () {

        location.href = 'http://www.baidu.com?' + '&id=' + this.id + '&name=' + name;
    })
   
        function hascolor() {
            var cell = document.getElementsByClassName('tag')
            for (let x = 0; x < cell.length; x++) {
                if (cell[x].innerText === '校内') {
                    cell[x].style.background = 'rgba(145, 232, 168, 0.8)'
                }
            }
        }


</script>

</html>